<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form>
                    <h:panelGrid columns="1" style="width: 50%;margin: 0 auto">
                        <p:commandButton id="btnNuevoBanco" action="#{MBServicio.nuevo()}" value="AGREGAR SERVICIO" ajax="false"/>
                    </h:panelGrid> 
                </h:form>
                <h:form>
                    <p:panel id="pnlBusquedaServicio" header="Consultar Servicios" style="width: 50%;margin: 0 auto 15px" 
                             toggleable="true" widgetVar="buscar" collapsed="#{BKServicio.listaServiciosActivos ne null}" >
                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid" style="width: 100%">

                            <h:outputLabel id="lblCategoriaArticulo" value="CATEGORIA ARTICULO : " class="lblBusqueda" />
                            <p:selectOneMenu id="cbxCategoriaArticulo" value="#{BKServicio.idCategoriaArticuloBusqueda}"  style="width: 250px"
                                             filter="true" filterMatchMode="contains" converter="#{categoriaArticuloConverter}" >
                                <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                                <f:selectItems value="#{BKServicio.listaCategoriaArticulo}" 
                                               var="categoria" itemLabel="#{categoria.nombre}"
                                               itemValue="#{categoria}" />	
                            </p:selectOneMenu>

                            <h:outputLabel id="lblServicio" value="NOMBRE : " class="lblBusqueda" />
                            <p:inputText onkeyup="cambiarMayuscula(this)" id="txtServicio" value="#{BKServicio.servicioBusqueda.nombre}"
                                         style="width: 250px"/>  

                        </h:panelGrid>

                        <h:panelGrid columns="1" columnClasses="label, value" styleClass="grid" >
                            <p:commandButton id="btnBuscarServicio" value="BUSCAR" update="pnlBusquedaServicio,dataTablaServicios"  
                                             actionListener="#{MBServicio.buscarListaServicios}"
                                             oncomplete="listaServicios.show();buscar.toggle()" style="font-size: 12px"/>
                        </h:panelGrid>

                    </p:panel>

                    <p:panel id="pnlListaServicios" header="Lista de Servicios" closable="true" style="width: 80%;margin: 10px auto" 
                             visible="#{(BKServicio.listaServiciosActivos eq null)?false:true}" widgetVar="listaServicios" >

                        <p:dataTable id="dataTablaServicios" var="servicio" value="#{BKServicio.listaServiciosActivos}" widgetVar="lista"
                                     emptyMessage="No se encontraron servicios" filteredValue="" rowIndexVar="rowIndex" style="width:100%"
                                     paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="20,30,40"
                                     scrollHeight="250" paginatorPosition="bottom" styleClass="datable-busqueda" scrollable="true"> 
                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTablaServicios" fileName="servicios" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTablaServicios" fileName="servicios"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>
                            <p:column id="idColumnaNum" style="width: 5%"> 
                                <f:facet name="header">  
                                    <h:outputText value="Num." />  
                                </f:facet> 
                                <h:outputText value="#{rowIndex+1}" /> 
                            </p:column>

                            <p:column id="idColumnaCategoriaArticulo" style="width: 25%"
                                      sortBy="#{servicio.idCategoriaArticulo.nombre}"> 
                                <f:facet name="header">  
                                    <h:outputText value="Categoria Articulo" />  
                                </f:facet> 
                                <h:outputText value="#{servicio.idCategoriaArticulo.nombre}" /> 
                            </p:column>

                            <p:column id="idColumnaServicio" style="width: 25%"
                                      sortBy="#{servicio.nombre}"> 
                                <f:facet name="header">  
                                    <h:outputText value="Nombre" />  
                                </f:facet> 
                                <h:outputText value="#{servicio.nombre}" /> 
                            </p:column>

                            <p:column id="idColumnaDescripcion" style="width: 30%"
                                      sortBy="#{servicio.descripcion}" >
                                <f:facet name="header">  
                                    <h:outputText value="Descripcion" />  
                                </f:facet> 
                                <h:outputText value="#{servicio.descripcion}" /> 
                            </p:column>


                            <p:column id="idAccionesServicio" headerText="Acciones" style="width: 15%" exportable="false">
                                <p:commandButton icon="ui-icon-pencil" ajax="false" title="Editar" action="#{MBServicio.editar()}">
                                    <f:setPropertyActionListener value="#{servicio}" target="#{BKServicio.servicioFormulario}" />  
                                </p:commandButton>  
                                <p:commandButton id="btnEliminarServicio" title="Eliminar" icon="ui-icon-trash"  oncomplete="confirmacion.show()">
                                    <f:setPropertyActionListener value="#{servicio}" target="#{BKServicio.servicioSeleccionado}" />
                                </p:commandButton>
                            </p:column>

                        </p:dataTable>
                    </p:panel>

                    <p:confirmDialog id="dlgEliminarServicio" message="¿ Desea realmente eliminar este servicio ?" 
                                     header="Eliminar Servicio" severity="alert" widgetVar="confirmacion">
                        <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">
                            <p:commandButton id="btnConfEliServicio" update="dataTablaServicios" value="Si"  oncomplete="confirmacion.hide()"  
                                             actionListener="#{MBServicio.eliminar}" />  
                            <p:commandButton id="btnCancEliServicio" value="No" onclick="confirmacion.hide()" type="button" />   
                        </h:panelGrid>

                    </p:confirmDialog>		

                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>   